rollup-plugin-copy

What is rollup-plugin-copy?

The rollup-plugin-copy package is a Rollup plugin that allows you to copy files and folders as part of your build process. This can be useful for tasks such as copying static assets, configuration files, or other resources that need to be included in your final build output.

What are rollup-plugin-copy's main functionalities?

Copying Files

This feature allows you to copy individual files or patterns of files from a source directory to a destination directory. In this example, all files in the 'src/assets' directory are copied to the 'dist/assets' directory.

const copy = require('rollup-plugin-copy');

module.exports = {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    copy({
      targets: [
        { src: 'src/assets/*', dest: 'dist/assets' }
      ]
    })
  ]
};

Copying Folders

This feature allows you to copy entire folders from a source directory to a destination directory. In this example, the 'src/config' folder is copied to the 'dist/config' folder.

const copy = require('rollup-plugin-copy');

module.exports = {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    copy({
      targets: [
        { src: 'src/config', dest: 'dist/config' }
      ]
    })
  ]
};

Transforming Files

This feature allows you to transform the contents of files as they are copied. In this example, the 'src/config.json' file is copied to 'dist/config.json' with all instances of 'foo' replaced with 'bar'.

const copy = require('rollup-plugin-copy');

module.exports = {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    copy({
      targets: [
        { src: 'src/config.json', dest: 'dist/config.json', transform: (contents) => contents.toString().replace(/foo/g, 'bar') }
      ]
    })
  ]
};

Other packages similar to rollup-plugin-copy

copy-webpack-plugin

The copy-webpack-plugin is a similar plugin for Webpack that copies files and directories during the build process. It offers similar functionality to rollup-plugin-copy but is designed to work with Webpack instead of Rollup.

gulp-copy

The gulp-copy package is a Gulp plugin that allows you to copy files and directories as part of your Gulp build process. It provides similar functionality to rollup-plugin-copy but is intended for use with Gulp.

grunt-contrib-copy

The grunt-contrib-copy package is a Grunt plugin that copies files and directories as part of your Grunt build process. It offers similar functionality to rollup-plugin-copy but is designed for use with Grunt.

README

rollup-plugin-copy

Copy files and folders, with glob support.

Installation

# yarn
yarn add rollup-plugin-copy -D

# npm
npm install rollup-plugin-copy -D

Usage

// rollup.config.js
import copy from 'rollup-plugin-copy'

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/app.js',
    format: 'cjs'
  },
  plugins: [
    copy({
      targets: [
        { src: 'src/index.html', dest: 'dist/public' },
        { src: ['assets/fonts/arial.woff', 'assets/fonts/arial.woff2'], dest: 'dist/public/fonts' },
        { src: 'assets/images/**/*', dest: 'dist/public/images' }
      ]
    })
  ]
}

Configuration

There are some useful options:

targets

Type: Array | Default: []

Array of targets to copy. A target is an object with properties:

• src (string Array): Path or glob of what to copy
• dest (string Array): One or more destinations where to copy
• rename (string Function): Change destination file or folder name
• transform (Function): Modify file contents

Each object should have src and dest properties, rename and transform are optional. globby is used inside, check it for glob pattern examples.

File

copy({
  targets: [{ src: 'src/index.html', dest: 'dist/public' }]
})

Folder

copy({
  targets: [{ src: 'assets/images', dest: 'dist/public' }]
})

Glob

copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }]
})

Glob: multiple items

copy({
  targets: [{ src: ['src/index.html', 'src/styles.css', 'assets/images'], dest: 'dist/public' }]
})

Glob: negated patterns

copy({
  targets: [{ src: ['assets/images/**/*', '!**/*.gif'], dest: 'dist/public/images' }]
})

Multiple targets

copy({
  targets: [
    { src: 'src/index.html', dest: 'dist/public' },
    { src: 'assets/images/**/*', dest: 'dist/public/images' }
  ]
})

Multiple destinations

copy({
  targets: [{ src: 'src/index.html', dest: ['dist/public', 'build/public'] }]
})

Rename with a string

copy({
  targets: [{ src: 'src/app.html', dest: 'dist/public', rename: 'index.html' }]
})

Rename with a function

copy({
  targets: [{
    src: 'assets/docs/*',
    dest: 'dist/public/docs',
    rename: (name, extension, fullPath) => `${name}-v1.${extension}`
  }]
})

Transform file contents

copy({
  targets: [{
    src: 'src/index.html',
    dest: 'dist/public',
    transform: (contents, filename) => contents.toString().replace('__SCRIPT__', 'app.js')
  }]
})

verbose

Type: boolean | Default: false

Output copied items to console.

copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }],
  verbose: true
})

hook

Type: string | Default: buildEnd

Rollup hook the plugin should use. By default, plugin runs when rollup has finished bundling, before bundle is written to disk.

copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }],
  hook: 'writeBundle'
})

copyOnce

Type: boolean | Default: false

Copy items once. Useful in watch mode.

copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }],
  copyOnce: true
})

copySync

Type: boolean | Default: false

Copy items synchronous.

copy({
  targets: [{ src: 'assets/*', dest: 'dist/public' }],
  copySync: true
})

flatten

Type: boolean | Default: true

Remove the directory structure of copied files.

copy({
  targets: [{ src: 'assets/**/*', dest: 'dist/public' }],
  flatten: false
})

All other options are passed to packages, used inside:

• globby
• fs-extra copy function

Original Author

Cédric Meuter

License

MIT